<template>
    <el-dialog :title="upload.title" v-model="isShow" width="400px" append-to-body>
        <el-upload
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
        >
            <el-icon class="el-icon--upload">
                <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
                <div class="el-upload__tip text-center">
                    <div class="el-upload__tip">
                        <el-checkbox v-model="upload.updateSupport" />
                        是否更新已经存在的用户数据
                    </div>
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                                @click="importTemplate">下载模板
                    </el-link>
                </div>
            </template>
        </el-upload>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="isShow = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {ref, defineProps} from 'vue';

const isShow = ref(false);  // 控制弹窗显示/隐藏
const upload = ref({
    title: '用户导入',
    url: 'upload_url_here', // 文件上传的API接口
    isUploading: false,
    headers: {}, // 如果需要传递额外的headers
    updateSupport: false, // 更新现有用户
});
const TemplateDownUrl = ref('/导入模版.xlsx');  // 控制弹窗显示/隐藏
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

const showupload = () => {
    changeShowStatus()
}
defineExpose({showupload})
// 提交上传的表单
const submitFileForm = () => {
    console.log("提交文件...");
    // 上传逻辑：你可以在这里触发上传文件的逻辑
    isShow.value = false; // 上传后关闭弹窗
};
 /** 下载模板操作 */
 function importTemplate() {
    window.open(TemplateDownUrl.value, '_blank');
 }
// 进度回调
const handleFileUploadProgress = (progressEvent) => {
    console.log("上传进度：", progressEvent);
};

// 上传成功的回调
const handleFileSuccess = (response, file, fileList) => {
    console.log("上传成功：", response);
    // 上传成功后，可以触发父组件的事件来刷新数据
    emit('getList');
};
</script>
